<script setup lang="ts">
import { ref, watch } from "vue";
import { sub } from "@/utils/caculate";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";

const systemStore = useSystemStoreWithOut();
const { materialTypeList } = storeToRefs(systemStore);

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  tableHeight: {
    type: Number,
    default: 0
  }
});

const emits = defineEmits(["setTotalData"]);
const tableData = ref([]);
const curRow = ref({});
const rulesItem = ref({
  required: true,
  validator: (rule: any, value: any, callback: any) => {
    if (value === "") {
      callback(new Error("请输入实盘库存"));
    } else {
      callback();
    }
  },
  trigger: "blur"
});
const formRef = ref(null);

watch(
  () => props.list,
  (newVal: any) => {
    tableData.value = newVal;
  },
  { deep: true }
);

watch(
  tableData,
  (newVal: any) => {
    emits("setTotalData", newVal);
  },
  { deep: true }
);

const handleRowClick = (row: any) => {
  curRow.value = row;
};

const validate = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid: any) => {
      if (valid) {
        resolve(true);
      } else {
        reject(false);
      }
    });
  });
};

defineExpose({
  getTableData: () => {
    return tableData.value;
  },
  validate
});
</script>

<template>
  <el-form ref="formRef" :model="tableData" inline>
    <el-table
      class="tableBox"
      :data="tableData"
      style="width: 100%"
      :height="tableHeight"
      @row-click="handleRowClick"
    >
      <el-table-column type="index" label="序号" min-width="80px" />
      <el-table-column prop="materialCode" label="物料编码" min-width="128px" show-overflow-tooltip />
      <el-table-column prop="materialName" label="物料名称" min-width="120px" show-overflow-tooltip />
      <el-table-column label="物料类型" prop="materialType" min-width="104px" show-overflow-tooltip>
        <template #default="scope">
          <el-text>{{
            materialTypeList.find(
              val => val.dictLabelValue == scope.row.materialType
            )?.dictLabelName
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        prop="materialSpecs"
        label="物料规格"
        min-width="200px"
        show-overflow-tooltip
      />
      <el-table-column prop="unit" label="单位" min-width="80px" show-overflow-tooltip/>
      <el-table-column
        prop="instockNum"
        label="当前可用库存"
        min-width="136px"
        show-overflow-tooltip
      />
      <el-table-column prop="num" label="实盘库存" min-width="150px">
        <template #default="{ row, $index }">
          <el-form-item :prop="`[${$index}].num`" :rules="rulesItem">
            <el-input v-model="row.num" placeholder="" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="盘亏结果" min-width="136px" show-overflow-tooltip>
        <template #default="{ row }">
          {{ sub(row.num, row.instockNum) }}
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<style lang="scss" scoped>
.tableBox {
  .el-input {
    --el-input-width: 100% !important;
  }
  .el-form-item {
    margin-bottom: 0;
    margin-right: 0;
  }
}
</style>
